<template>
    <div id="houHome">
        <el-container>
            <layoutAside></layoutAside>
            <el-container>
                <layoutHeader></layoutHeader>
                <el-main id="elmain">
                    <transition name="main" mode="out-in">
                        <router-view></router-view>
                    </transition>
                </el-main>
                <el-footer>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import layoutAside from "./aside/aside"
    import layoutHeader from './header/header'
    export default {
        name: "houHome",
        components: {
            layoutHeader,
            layoutAside
        }
    }
</script>

<style>
    .main-enter, .main-leave-to {
        opacity: 0;
        transform: translateY(30px);

    }

    .main-enter-active {
        transition: all 0.2s;
    }

    .main-leave-active {
        position: absolute;
        transition: all 0.3s;
    }
</style>
<style lang="scss">
    * {
        margin: 0px;
        padding: 0px;
    }

    body {
        background-color: #ece6d2;
        font-size: 14px;
        color: #333333;
        height: 100%;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    $top: top;
    $bottom: bottom;
    $left: left;
    $right: right;
    $leftright: ($left, $right);
    %w100 {
        width: 100%;
    }

    %h100 {
        height: 100%;
    }

    %cursor {
        cursor: pointer;
    }

    html, body, #houHome, .el-container, #asideNav, ul.el-menu {
        @extend %h100;
    }

    @mixin set-value($side, $value) {
        @each $prop in $leftright {
            #{$side}-#{$prop}: $value;
        }
    }

    #elmain {
        background-color: #f0f2f5;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9 !important;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>
